<template>
  <div class="col main-content" style="padding: 15px">
    <el-form labelPosition="top" ref="configForm">
      <el-tabs type="border-card" class="custom-form">
        <el-tab-pane label="网站配置">
          <el-form-item label="网站名称:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input v-model="configs.siteName" placeholder="输入网站名称"></el-input>
              </el-col>
              <el-col :span="17">
                <span>网站名称，将显示在浏览器窗口标题等位置</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="网站关键字(SEO):">
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input v-model="configs.seo" placeholder="输入网站关键字"></el-input>
              </el-col>
              <el-col :span="17">
                <span>请输入网站的关键字,方面搜索引擎录入你的网站</span>
              </el-col>
            </el-row>
          </el-form-item>


          <el-form-item label="公司名称:">
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input v-model="configs.company" placeholder="输入公司名称"></el-input>
              </el-col>
              <el-col :span="17">
                <span>公司名称，将显示在页面底部的联系方式处</span>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="备案信息:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input placeholder="输入备案信息" v-model="configs.icp"></el-input>
              </el-col>
              <el-col :span="17">
                <span>页面底部可以显示 ICP 备案信息，如果网站已备案，在此输入您的备案号，它将显示在页面底部，如果没有请留空</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="网站的favicon图标:">
            <el-row :gutter="20">
              <el-col :span="7">
                <h-upload :files="configs.faviconImgs" :single="true" owner="webInfo">
                  <el-button type="primary">选择ico图标</el-button>
                </h-upload>
              </el-col>
              <el-col :span="17">
                <span>网站的favicon图标格式ico，大小128*128</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="首页头部背景色:">
            <el-row :gutter="20">
              <el-col :span="7">
               <span>开始</span><el-color-picker v-model="configs.headerBgStartColor" size="big"  show-alpha></el-color-picker>
               <span>结束</span><el-color-picker v-model="configs.headerBgEndColor" size="big"  show-alpha></el-color-picker>
              </el-col>
              <el-col :span="17">
                <span>为了配合Logo显示的头部导航条背景色</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="登录框字体颜色:">
            <el-row :gutter="20">
              <el-col :span="7">
                <el-color-picker v-model="configs.bgColor" size="big"  show-alpha></el-color-picker>
              </el-col>
              <el-col :span="17">
                <span>为了配合登录背景图片登录框显示的字体颜色</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="登录背景图片:">
            <el-row :gutter="20">
              <el-col :span="7">
                <h-upload :files="configs.bgImgs" :single="true" owner="webInfo">
                  <el-button type="primary">选择背景图片</el-button>
                </h-upload>
              </el-col>
              <el-col :span="17">
                <span>前端用户登录页面的背景图片,大小1920*1680</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="网站logo:">
            <el-row :gutter="20">
              <el-col :span="7">
                <h-upload :files="configs.logoImgs" :single="true" owner="webInfo">
                  <el-button type="primary">选择LOGO</el-button>
                </h-upload>
              </el-col>
              <el-col :span="17">
                <span>网站的LOGO图标，大小180*40</span>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="开放注册:">
            <el-row :gutter="20">
              <el-col :span="7">
                <el-radio v-model="configs.openRegister" label="1">开放注册</el-radio>
                <el-radio v-model="configs.openRegister" label="0">关闭注册</el-radio>
              </el-col>
              <el-col :span="17">
                <span>控制网站是否对用户开放注册功能</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="邀请注册:">
            <el-row :gutter="20">
              <el-col :span="7">
                <el-radio v-model="configs.invitation" label="0">不需要邀请码</el-radio>
                <el-radio v-model="configs.invitation" label="1">需要邀请码</el-radio>
              </el-col>
              <el-col :span="17">
                <span>控制用户注册的时候是否需要邀请码才能注册</span>
              </el-col>
            </el-row>
          </el-form-item>


          <el-form-item label="网站描述:">
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input type="textarea" placeholder="输入网站信息" v-model="configs.webDescription"></el-input>
              </el-col>
              <el-col :span="17">
                <span>输入网站的信息让搜索引擎更好的了解你的网站</span>
              </el-col>
            </el-row>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="交易配置">
          <el-form-item label="支付信息:">
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input v-model="configs.payInfo" placeholder="请输入收款信息"></el-input>
              </el-col>
              <el-col :span="17">
                <span>请输入收款信息</span>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="支付宝支付码:">
            <el-row :gutter="20">
              <el-col :span="7">
                <h-upload :files="configs.alipayImgs" :single="true" owner="webInfo">
                  <el-button type="primary">选择支付宝支付码</el-button>
                </h-upload>
              </el-col>
              <el-col :span="17">
                <span>请上传支付宝支付码图片</span>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="微信支付码:">
            <el-row :gutter="20">
              <el-col :span="7">
                <h-upload :files="configs.weixinImgs" :single="true" owner="webInfo">
                  <el-button type="primary">选择微信支付码</el-button>
                </h-upload>
              </el-col>
              <el-col :span="17">
                <span>请上传微信支付码图片</span>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="领货需先补缴运费:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                  <el-radio v-model="configs.firstPayFreight" label="1">需要先补缴运费</el-radio>
                  <el-radio v-model="configs.firstPayFreight" label="0">不需要先缴运费</el-radio>
              </el-col>
              <el-col :span="17">
                <span>用户需要先对补运费订单进行付款后才能进行领货操作。</span>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="现货区:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-radio v-model="configs.sellPage" label="1">显示现货区</el-radio>
                <el-radio v-model="configs.sellPage" label="0">不显示现货区</el-radio>
              </el-col>
              <el-col :span="17">
                <span>用户需要先对补运费订单进行付款后才能进行领货操作。</span>
              </el-col>
            </el-row>
          </el-form-item>

        </el-tab-pane>

        <el-tab-pane label="邮件配置">
          <el-form-item label="SMTP 服务器:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input v-model="configs.smtpUrl" placeholder="请输入SMTP服务器地址"></el-input>
              </el-col>
              <el-col :span="17">
                <span>设置SMTP服务器地址</span>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="SMTP 端口:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input v-model="configs.smtpPort" placeholder="请输入SMTP服务器的端口"></el-input>
              </el-col>
              <el-col :span="17">
                <span>设置 SMTP 服务器的端口，默认为 25</span>
              </el-col>
            </el-row>
          </el-form-item>


          <el-form-item label="SMTP 身份验证用户名:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input v-model="configs.smtpUser" placeholder="请输入用户名"></el-input>
              </el-col>
              <el-col :span="17">
                <span>填写SMTP身份验证用户名</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="SMTP 身份验证密码:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input type="password" v-model="configs.smtpPassword" placeholder="请输入密码"></el-input>
              </el-col>
              <el-col :span="17">
                <span>填写SMTP身份验证密码</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="发件人邮件地址:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input v-model="configs.smtpMail" placeholder="请输入邮件地址"></el-input>
              </el-col>
              <el-col :span="17">
                <span>如果需要验证，必须为本服务器的邮件地址，格式为:user@domain.com</span>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="发件人名称:">
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input v-model="configs.smtpUserName" placeholder="请输入发件人名称"></el-input>
              </el-col>
              <el-col :span="17">
                <span>填写希望的邮件显示的发件人名称信息</span>
              </el-col>
            </el-row>
          </el-form-item>


        </el-tab-pane>
        <el-tab-pane label="阿里云OSS">
          <el-form-item label="AccessKey ID:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input v-model="configs.aliSSOId" placeholder="请输入对应的AccessKey ID的信息"></el-input>
              </el-col>
              <el-col :span="17">
                <span>阿里云提供的OSS的AccessKey ID</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="AccessKey Secret:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input type="password" v-model="configs.aliSSOKey"
                          placeholder="请输入对应的AccessKey Secret的信息"></el-input>
              </el-col>
              <el-col :span="17">
                <span>阿里云提供的OSS的AccessKey Secret</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="Bucket:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input v-model="configs.aliSSOBucket" placeholder="请输入对应的Bucket的名称"></el-input>
              </el-col>
              <el-col :span="17"><span>需要访问的OSS对应的Bucket名称</span>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="Endpoint:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input v-model="configs.aliSSOEndpoint" placeholder="请输入OSS的入口地址"></el-input>
              </el-col>
              <el-col :span="17"><span>阿里云OSS服务的入口地址</span>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="Host:" required>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-input v-model="configs.aliSSOHost" placeholder="请输入OSS的访问Url"></el-input>
              </el-col>
              <el-col :span="17"><span>阿里云OSS服务的访问Url,如没有自定义的Host请输入http://{Bucket}.{Endpint}的值</span>
              </el-col>
            </el-row>
          </el-form-item>
        </el-tab-pane>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-button type="primary" @click="saveConfig">保存</el-button>
          </el-col>
        </el-row>
      </el-tabs>
    </el-form>
  </div>
</template>
<style>
  .custom-form .left {
    width: 300px !important;
  }
</style>
<script>
  import AdminService from 'src/service/admin'
  import HUpload from 'src/components/common/HUpload'

  export default {
    name: 'AdminSystem',
    components: {HUpload},
    data() {
      return {
        configs: {
          openRegister: "1",
          invitation: "0",
          bgImgs: [],
          logoImgs: [],
          faviconImgs: [],
          alipayImgs: [],
          weixinImgs: []
        }
      }
    },
    methods: {
      getConfig: function () {
        const me = this
        AdminService.config(1).then(function (data) {
          if (data != null) {
            me.configs = data.datas[0];
            if (me.configs.smtpPort == null) {
              me.configs['smtpPort'] = 465
            }
            if (me.configs.logoImgs == null) {
              me.configs.logoImgs = [];
            }
            if (me.configs.bgImgs == null) {
              me.configs.bgImgs = []
            }
            if (me.configs.faviconImgs == null) {
              me.configs.faviconImgs = [];
            }
            if (me.configs.alipayImgs == null) {
              me.configs.alipayImgs = [];
            }
            if (me.configs.weixinImgs == null) {
              me.configs.weixinImgs = [];
            }
          }
        })
      },
      saveConfig: function () {
        const me = this
        const configs = JSON.stringify(this.configs)
        AdminService.saveConfig({'id': 1, 'content': configs}).then(
          function (data) {
            if (data != null) {
              if (data.datas[0] > 0) {
                me.$message.success('更新配置信息成功.')
              } else {
                me.$message.error(data.message)
              }
            }
          }
        )
      }
    },
    beforeMount: function () {
      this.getConfig()
    }
  }
</script>
